<template>
  <div id="ScorePage" :class="['left', 'contentWidth' , {'mainBig': $store.state.isCollapse ,'mainSmall': !$store.state.isCollapse }]">
    <div class="header">
      <div class="backTo" v-show="isBackShow" @click="back">
        <img src="../../../static/images/back.png" alt="返回" />
      </div>
      <div class="contentTopLeft left">
        <h2>评分</h2>
      </div>
      <maintopright></maintopright>
      <maintopleftbottom></maintopleftbottom>
    </div>
    <div id="MainScorePage" class="mainContent" v-if="!isBackShow">
      <div class="clearfix">
        <div class="link-list center-block pull-left">
          <router-link v-for="(item,index) in list"
                       :key="item.value" :to="{path:item.path,query:{item:7,ind:index }}"
                       :class="{'router-link-exact-active':ind == index}"
                       @click.native="changeBgc(index)">
            {{item.label}}
          </router-link>
        </div>
      </div>
        <router-view></router-view>
    </div>
      <router-view v-if="isBackShow"></router-view>
  </div>
</template>
<script>
import maintopright from '@/components/main/maintop/maintopRight'
import maintopleftbottom from '@/components/main/maintop/maintopLeftBottom'
  export default {
    data() {
      return {
        isBackShow: false,
        list: [
          { path: '/scorePage/scoreListPage', label: '基本评分' },
          { path: '/scorePage/mewsScoreChart', label: 'MEWS评分' },
        ],
        ind: 0
      }
    },

    mounted() {
      if (this.$route.query.ind) {
        this.ind = this.$route.query.ind;
      } else {
        this.ind = 0;
      }
      this.isRoute();
    },
    watch: {

      $route: {
        handler(val, oldval) {
          this.ind = this.$route.query.ind
          if (val.path == "/scorePage/scoreListPage" || val.path == "/scorePage/mewsScoreSurface" || val.path == "/scorePage/mewsScoreChart") {
            this.isBackShow = false;
          } else {
            this.isBackShow = true;
          }
        },
      }
    },
    methods: {
      back() {
        if (this.$route.query.state == 1) {
          this.$router.push({
            path: '/basicInformation',
            query: { item: 1 }
          })
        } else {
          this.$router.push({
            path: '/scorePage/scoreListPage',
            query: { item: 7,ind:0 }
          })
        }
         
      },
      changeBgc(index) {
        this.ind = index;
      },
      isRoute() {
        if (this.$route.path == '/scorePage/scoreListPage' || this.$route.path == '/scorePage/mewsScoreSurface' || this.$route.path == '/scorePage/mewsScoreChart') {
          this.isBackShow = false;
        } else {
          this.isBackShow = true;
        }
      }
    },
      components:{
    	maintopright,
    	maintopleftbottom,
    }
}
</script>
<style scoped>
  #ScorePage .link-list a {
    font-size: 17px;
    display: inline-block;
    margin-right: 15px;
  }
  #MainScorePage{
    padding:20px 0 0;
  }
  .link-list {
    padding-left: 45px;
    padding-top: 7px;
    padding-bottom: 13px;
    margin-right: 50px;
  }

  #ScorePage .link-list a:after {
    display: inline-block;
    content: '';
    width: 1px;
    height: 20px;
    background-color: #ccc;
    margin-left: 10px;
    vertical-align: middle;
  }

  #ScorePage .link-list a:last-child:after {
    width: 0;
  }

  #ScorePage .link-list a.router-link-exact-active {
    color: #11a7f3;
  }
  @media screen and (max-width: 425px) {
  
  .link-list {
    padding-left: 20px;
    padding-top: 7px;
    padding-bottom: 13px;
    margin-right: 0;
  }
  
}
</style>
